<template>
  <el-container class="main" style="background-color:#f4f2f2;">
    <el-aside class="detailsAside">
      <div style="margin-left: 20px">
        <span style="font-weight: bolder;font-size: 17px;">{{ orderInfo.orderTitle }}&nbsp;&nbsp;&nbsp;
          <el-tag size="small" effect="dark" type="warning"
                  style="font-weight: 400">{{ orderInfo.orderQualityName }}</el-tag>
        </span>
        <span style="float: right;padding-right: 20px">
          <el-button size="mini" @click="skipHandleOrderByUpdate">编辑</el-button>
          <el-button size="mini" type="danger" v-if="orderInfo.status===1">取消订单</el-button>
          <el-button type="primary" size="mini" v-if="orderInfo.status===1">指派订单</el-button>
        </span>
        <p style="font-size: 12px;font-weight: bold;color: black">订单状态：
          <el-tag type="primary" size="mini" effect="dark " v-if="orderInfo.status===1">下单</el-tag>
          <el-tag type="success" size="mini" effect="dark" v-else-if="orderInfo.status===2">已完成</el-tag>
          <el-tag type="danger" effect="mini" size="small" v-else>死单</el-tag>
        </p>
        <el-divider />
        <el-descriptions size="small" style="margin-top: 20px">
          <el-descriptions-item label="客户名称">{{ orderInfo.customerName }}&nbsp;&nbsp;
            <el-tag size="mini" type="info">VVIP</el-tag>
            <span style="width: 5px" />
            <el-tag size="mini" type="info">高消费</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="所属公司">{{ orderInfo.orgName }}</el-descriptions-item>
          <el-descriptions-item label="制作组">{{ orderInfo.teamName }}</el-descriptions-item>
          <el-descriptions-item label="对图时间">{{ orderInfo.orderDate }}</el-descriptions-item>
          <el-descriptions-item label="客服">{{ orderInfo.customerServiceName }}</el-descriptions-item>
          <el-descriptions-item label="风格">{{ orderInfo.fgflName }}</el-descriptions-item>
          <el-descriptions-item label="订单编号">{{ orderInfo.orderNo }}</el-descriptions-item>
          <el-descriptions-item label="附件">客厅原始图&需求&nbsp;&nbsp;
            <el-tag size="mini" type="warning">高级</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="派单方式">
            <span v-if="orderInfo.dispatchType===1">直接派送</span>
            <span v-else>派单员派送</span>
          </el-descriptions-item>
          <el-descriptions-item label="订单类型">
            <span v-if="orderInfo.orderType===1">施工图</span>
            <span v-else-if="orderInfo.orderType===2">漫游图</span>
            <span v-else>效果图</span>
          </el-descriptions-item>
          <el-descriptions-item label="备注">
            <span v-if="orderInfo.remark===null||orderInfo.remark===''">一 一</span>
            <span v-else>{{ orderInfo.remark }}</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div>
        <el-button type="primary" id="addTask" size="small" @click="addNewTask">添加任务</el-button>
        <el-tabs type="card">
          <el-tab-pane :label="'任务列表( '+getOrderDetailLength+' )'">
            <ul class="infinite-list" style="overflow:auto;" id="taskUL">
              <!--无任务时展示内容-->
              <li class="infinite-list-item" v-if="orderDetailsLength===0"
                  style="justify-content: center;height: 100px;font-size: 14px;color: gray">-暂无任务-
              </li>
              <!--有任务时展示内容-->
              <li v-for="(item,index) in orderInfo.orderDetailList" :key="index" v-else>
                <!--任务基本展示内容-->
                <div class="infinite-list-item list-item" v-if="item.taskIsCheck">
                  <div style="margin-left: 10px">
                    <el-image style="width: 130px; height: 90px;margin-top: 8px"
                              :src="item.image?item.image:defaultPic" />
                  </div>
                  <div>
                    <p style="margin: 8px 0 0 20px;font-size: 15px;">
                      {{ item.taskName }}&nbsp;
                      <el-tag size="mini" v-if="item.status===1" type="info">正在制作</el-tag>
                      <el-tag size="mini" v-else-if="item.status===2">完成小图</el-tag>
                      <el-tag size="mini" v-else-if="item.status===3">项目等待中</el-tag>
                      <el-tag size="mini" v-else-if="item.status===4" type="danger">死单</el-tag>
                      <el-tag size="mini" v-else type="success">已完成</el-tag>
                    </p>
                    <span style="padding-left:20px;color: gray;font-size: 13px;">
                      <span>{{ item.makeName }}&nbsp;
                        <el-tag type="warning" size="mini">王者</el-tag>
                      </span>
                      <span class="cut">|</span>
                      <span v-if="(item.money-item.paidMoney)===0">
                        <el-badge type="success" is-dot style="padding-top: 8px" />
                        <span>已结清<span style="font-size: 12px;color:#ababab">(共计￥{{ item.money + ".00" }})</span></span>
                      </span>
                      <span v-else>
                        <el-badge type="danger" is-dot style="padding-top: 8px" />
                        <span>待支付{{ item.payment ? item.payment : item.money - item.paidMoney }}元<span
                          style="font-size: 12px;color:#ababab">(共计￥{{ item.money + ".00" }})</span></span>
                      </span>
                      <span class="cut">|</span>
                      <span>
                        <el-link type="primary" :underline="false" v-if="item.modelNo!==null"
                                 style="padding-bottom: 5px" href="http://127.0.0.1/uploadFiles/测试测试.zip">
                          下载附件({{ item.modelSize }})
                        </el-link>
                        <span v-else style="font-size: 12px;color:#ababab">无附件内容</span>
                      </span>
                      <br />
                      <span style="position: relative;bottom: 8px;left: 20px">
                        <span>
                          <span>场景：{{ item.sceneName + "/" + item.gnflName }}</span>
                        </span>
                        <span class="cut">|</span>
                        <span>
                          <span v-if="item.makeType===1">任务类型：静态图</span>
                          <span v-else>任务类型：全景图</span>
                        </span>
                        <span class="cut">|</span>
                        <span>任务描述：一 一</span>
                      </span>
                    </span>
                  </div>
                  <div style="position: relative;left: 40px" class="edit">
                    <span style="width: 85px;display: inline-block" v-if="(item.money-item.paidMoney)===0" />
                    <el-button size="mini" type="success" v-if="(item.money-item.paidMoney)!==0"
                               @click="openPaymentDialog(item)">付款
                    </el-button>
                    <el-button size="mini" @click="editTask(item)" type="primary">编辑</el-button>
                    <el-button size="mini" type="danger" @click="deleteTask(item,index)">删除</el-button>
                  </div>
                </div>
                <!--任务点击编辑按钮展示内容-->
                <div class="infinite-list-item list-item" v-if="item.taskIsEdit">
                  <el-form :inline="true" label-position="left" size="mini" :rules="taskRules" :model="item"
                           hide-required-asterisk="true" :ref="'taskForm'+index"
                           style="width: 630px;margin: 25px 0 0 15px;font-size: 10px;">
                    <el-form-item label="任务名称" prop="taskName">
                      <el-input size="mini" v-model="item.taskName" placeholder="请输入任务名称..."
                                style="width: 150px"
                                clearable />
                    </el-form-item>
                    <el-form-item label="任务金额" class="newTaskMargin" prop="money">
                      <el-input-number
                        size="mini"
                        v-model="item.money"
                        controls-position="right"
                        :min="item.paidMoney" :step="100"
                        style="width: 100px;" />
                    </el-form-item>
                    <el-form-item label="已付金额" style="margin-left: 8px" prop="paidMoney">
                      <el-input-number
                        size="mini"
                        v-model="item.paidMoney"
                        controls-position="right"
                        :min="0" :step="100"
                        :max="item.money"
                        style="width: 100px;" />
                    </el-form-item>
                    <el-form-item label="场景分类" prop="gnflArray" class="newTaskMargin">
                      <el-cascader v-model="item.gnflArray" :options="orderCategoryList"
                                   placeholder="请选择场景分类"
                                   size="mini" style="width: 145px"
                                   @change="temp=>changeTaskFgfl(temp,item)"
                                   :props="{label:'name',value:'id',children:'gradeOrderCategory' }" />
                    </el-form-item>
                    <el-form-item label="任务类型" prop="makeType">
                      <el-select v-model="item.makeType"
                                 placeholder="图片类型"
                                 size="mini"
                                 style="width: 110px">
                        <el-option label="静态图" :value="1" />
                        <el-option label="全景图" :value="2" />
                      </el-select>
                    </el-form-item>
                    <el-form-item label="指派人员" class="newTaskMargin" prop="makeId">
                      <el-select style="width: 100px" v-model="item.makeId"
                                 @change="changeTaskMakeSelect(item)">
                        <el-option v-for="staff in staffInfoList"
                                   :key="staff.id"
                                   :value="staff.makeId"
                                   :label="staff.makeName" />
                      </el-select>
                    </el-form-item>
                  </el-form>
                  <div class="edit" style="margin-left: 10px">
                    <el-button size="mini" type="danger" @click="newTaskCancelBtn(index)" v-if="item.isNewAdd">删除
                    </el-button>
                    <el-button size="mini" @click="quitEditState(item)" v-else>取消</el-button>
                    <el-button type="primary" size="mini" @click="saveEditState(item,index,item.isNewAdd)">保存
                    </el-button>
                  </div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="工单列表(66)">
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-aside>
    <el-main class="detailsMain">
      <div style="margin: 10px 0 20px 0">
        <h4>订单金额
          <span>
            <span style="width: 135px;display: inline-block" v-if="orderInfo.payment===0" />
            <el-link type="primary" style="margin-left: 110px;font-size: 12px;"
                     v-if="orderInfo.payment!==0" @click="openPaymentDialog(undefined)">付款</el-link>
            <el-link type="primary" style="margin-left: 10px;font-size: 12px;">订单退款</el-link>
          </span>
        </h4>
        <el-divider />
        <div>
          <span class="moneyTitle">总金额：</span>
          <span class="moneyTitle" style="margin-left: 140px">已付/代付</span>
          <div style="height: 10px" />
          <span class="moneyValue">{{ orderInfo.money - orderInfo.preferentiMoney }}
            <el-popover
              placement="bottom-start"
              width="200"
              v-if="orderInfo.preferentiMoney>0"
              trigger="hover">
              <h6>实付金额
                <span style="float: right;margin-right: 20px">
                  {{ orderInfo.money - orderInfo.preferentiMoney }}
                </span>
              </h6>
              <el-divider />
              <span style="font-size: 12px;color: darkgray;">原价
                <span style="float: right;margin-right: 20px;">
                  {{ orderInfo.money }}
                </span>
              </span>
              <p style="height: 5px" />
              <span style="font-size: 12px;color: darkgray">优惠券
                <span style="float: right;margin-right: 20px;">
                  {{ "-" + orderInfo.preferentiMoney }}
                </span>
              </span>
              <el-tag size="mini" style="margin-left: 2px;position: relative;bottom: 5px;cursor:default" type="warning"
                      slot="reference">{{ orderInfo.preferentiMoney }}元优惠券
              </el-tag>
            </el-popover>
            <el-tag size="mini" style="margin-left: 2px;position: relative;bottom: 5px" type="warning" v-else>
              未使用优惠券
            </el-tag>
          </span>
          <span class="moneyValue" style="float: right;padding-right: 10px" v-if="orderInfo.payment!==0">
            {{ orderInfo.paidMoney + "/" + orderInfo.payment }}
          </span>
          <span class="moneyValue" style="float: right;padding-right: 15px;font-size: 20px;" v-else>
            已结清
          </span>
          <div style="height: 10px" />
          <el-progress :text-inside="true" :stroke-width="12"
                       :percentage="parseInt((orderInfo.paidMoney+orderInfo.preferentiMoney)/orderInfo.money*100+'')" />
        </div>
      </div>
      <div>
        <h4>订单记录</h4>
        <el-divider />
        <div v-if="getOrderRecordLength!==0">
          <el-timeline style="padding:10px 0 0 10px">
            <el-timeline-item
              v-for="(item, index) in orderInfo.orderRecordList"
              :key="index"
              :color="item.color"
              :timestamp="TimeFormat(item.createTime)">
              {{ item.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-else class="noOrderRecord">
          <span style="font-size: 15px;color: darkgray">—暂无订单操作记录—</span>
        </div>
      </div>
      <el-dialog title="付款界面" width="450px" :before-close="closePaymentDialog" :visible.sync="paymentDialogVisible">
        <div style="width: 300px;margin: 0 auto;font-size: 14px;font-weight: bold;">
          <p>总金额：<span style="float: right;padding-right: 25px">￥{{ paymentDialog.money }}</span></p>
          <p style="margin-top: 8px">已支付：
            <span style="float: right;padding-right: 25px">￥{{ paymentDialog.paidMoney }}</span>
          </p>
          <p style="margin-top: 8px">优惠金额：
            <span style="float: right;padding-right: 25px">￥{{ paymentDialog.preferentiMoney }}</span>
          </p>
          <p style="margin: 8px 0">待支付：
            <span style="float: right;padding-right: 25px">￥{{ paymentDialog.payment }}</span>
          </p>
        </div>
        <el-form size="small" class="paymentForm" :model="paymentDialog" hide-required-asterisk="true"
                 :rules="payMoneyRules" ref="paymentForm" style="width: 300px;margin: 0 auto;padding-top: 10px">
          <el-form-item label="优惠券：" size="mini" prop="preferentialId" v-if="paymentDialog.type!==undefined">
            <el-select v-model="paymentDialog.preferentialId" size="mini"
                       placeholder="请选择优惠券"
                       style="width: 200px;margin-left: 14px"
                       clearable @change="changeCustomerCoupon">
              <el-option :value="null" label="无优惠券" v-if="customerCouponList.length===0" />
              <el-option v-for="item in customerCouponList"
                         v-else
                         :label='item.name'
                         :value="item.id"
                         :key="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="付款金额：" size="mini" prop="payMoney">
            <el-input style="width: 200px" clearable v-model.number="paymentDialog.payMoney" placeholder="请输入付款金额" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closePaymentDialog" size="small">取 消</el-button>
          <el-button type="primary" size="small" @click="goToPayMoney">确 定</el-button>
        </div>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
  import {
    queryOrderInfoById, queryStaffInfo, insertTaskInfo, updateTaskInfo,
    deleteOrderDetailById, queryTotalLevelOrderCategory, taskPayMoney, orderPayMoney,
    queryCustomerCoupon, useCustomerCoupon
  } from '@/api/orderInfo';
  import Cookies from "js-cookie";


  export default {
    name: 'OrderDetailsView',
    data() {
      let validateMoney = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入付款金额"));
        } else if (value > this.paymentDialog.payment) {
          callback(new Error("付款金额不能大于待支付金额"));
        } else {
          callback();
        }
      };
      return {
        orderId: -1,
        orderInfo: {},
        userInfo: JSON.parse(Cookies.get("JavaInfo")),
        paymentDialogVisible: false,
        orderDetailsLength: 0,
        staffInfoList: [],
        orderCategoryList: [],
        defaultPic: "http://127.0.0.1/images/404PhotoNotFound.png",
        customerCouponList: [],
        paymentDialog: {
          payMoney: "",
          recordPayForId: 0,
          preferentiMoney: "",
          preferentialId: "",
          chooseCouponMoney: "",  //记录选择优惠券金额
          originPayment: 0       //记录原本待支付金额
        },
        taskRules: {
          taskName: [{required: true, message: '请输入任务标题', trigger: 'blur'}],
          makeId: [{required: true, message: '请选择制作人员', trigger: 'change'}],
          gnflArray: [{type: "array", required: true, message: '请选择场景', trigger: 'change'}],
          makeType: [{required: true, message: '请选择制作类型', trigger: 'change'}]
        },
        payMoneyRules: {
          payMoney: [
            {validator: validateMoney, trigger: 'blur'},
            {type: 'number', message: '付款金额必须为数字', trigger: 'blur'}
          ]
        }

      }
    },
    computed: {
      getOrderDetailLength() {
        return this.orderInfo.orderDetailList.length;
      },
      getOrderRecordLength() {
        return this.orderInfo.orderRecordList.length;
      }
    },
    methods: {
      skipHandleOrderByUpdate() {
        this.$router.push({
          name: 'handleOrder',
          params: {isInsOrUpd: 'false', orderInfo: sessionStorage.getItem("handleOrder_orderInfo")}
        })
      },
      initCustomerCoupon() {
        queryCustomerCoupon(this.userInfo.id).then(data => this.customerCouponList = data);
      },
      addNewTask() {
        let newTask = {
          taskIsCheck: false,
          taskIsEdit: true,
          money: 1,
          makeType: "",
          paidMoney: 0,
          taskName: "",
          makeId: "",
          makeName: "",
          gnflArray: [],
          sceneId: 0,
          sceneName: "",
          gnfl: 0,
          gnflName: "",
          status: 1,
          isNewAdd: true
        }
        this.orderInfo.orderDetailList.push(newTask);
        this.orderDetailsLength = this.orderInfo.orderDetailList.length;
      },
      editTask(item) {
        this.$set(item, 'updateObj', Object.assign({}, item));
        item.taskIsEdit = true;
        item.taskIsCheck = false;
        this.$forceUpdate();
      },
      newTaskCancelBtn(index) {
        this.orderInfo.orderDetailList.splice(index, 1)
        this.orderDetailsLength = this.orderInfo.orderDetailList.length;
      },
      quitEditState(item) {
        if (item.updateObj) {
          item.taskName = item.updateObj.taskName;
          item.makeType = item.updateObj.makeType;
          item.gnflArray = item.updateObj.gnflArray;
          item.gnflName = item.updateObj.gnflName;
          item.sceneName = item.updateObj.sceneName;
          item.money = item.updateObj.money;
          item.remark = item.updateObj.remark;
          item.paidMoney = item.updateObj.paidMoney;
          item.makeName = item.updateObj.makeName;
          item.makeId = item.updateObj.makeId;
        }
        item.taskIsEdit = false;
        item.taskIsCheck = true;
        this.$forceUpdate();
      },
      saveEditState(item, index, isUpdOrIns) {
        this.$refs['taskForm' + index][0].validate(valid => {
          if (valid) {
            if (isUpdOrIns) {
              item.orderId = this.orderInfo.id;
              item.payment = item.money - item.paidMoney;
              item.isUpdOrIns = false;
              insertTaskInfo(item).then(resp => item.id = resp);
            } else {
              item.payment = item.money - item.paidMoney;
              updateTaskInfo(item);
            }
            item.taskIsEdit = false;
            item.taskIsCheck = true;
            this.$forceUpdate();
            this.$message.success({message: "保存成功！", duration: 1500})
          }
        })
      },
      changeTaskMakeSelect(item) {
        let result = this.staffInfoList.find(sil => item.makeId === sil.makeId);
        item.makeName = result.makeName;
        item.companyId = result.companyId;
        item.companyName = result.companyName;
      },
      changeTaskFgfl(temp, item) {
        let finds = this.orderCategoryList.find(ocl => ocl.id === temp[0]);
        let result = finds.gradeOrderCategory.find(ocl => ocl.id === temp[1]);
        item.sceneId = finds.id;
        item.sceneName = finds.name;
        item.gnfl = result.id;
        item.gnflName = result.name;
      },
      TimeFormat(time) {
        let d = time ? new Date(time) : new Date(),
          obj = {
            year: d.getFullYear(),
            month: d.getMonth() + 1,
            day: d.getDate(),
            hours: d.getHours(),
            min: d.getMinutes(),
            seconds: d.getSeconds()
          }
        Object.keys(obj).forEach(key => {
          if (obj[key] < 10) obj[key] = `0${obj[key]}`
        })
        return `${obj.year}-${obj.month}-${obj.day} ${obj.hours}:${obj.min}:${obj.seconds}`
      },
      deleteTask(item, index) {
        this.$confirm(`是否确定删除该条 "${item.taskName}" 任务记录?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteOrderDetailById(item.id).then(resp => {
            this.$message.success({
              duration: 1500,
              message: `已删除名为 ${item.taskName} 记录`,
            })
            this.orderInfo.orderDetailList.splice(index, 1);
            this.orderDetailsLength = this.orderInfo.orderDetailList.length;
          })
        }).catch(() => {
          this.$message({type: 'info', message: '已取消删除', duration: 2000});
        });
      },
      openPaymentDialog(item) {
        let temp = item || this.orderInfo;
        this.paymentDialog.id = temp.id;
        this.paymentDialog.money = temp.money;
        this.paymentDialog.paidMoney = temp.paidMoney;
        this.paymentDialog.payment = temp.payment;
        this.paymentDialog.originPayment = temp.payment;
        this.paymentDialog.preferentiMoney = temp.preferentiMoney || 0;
        //判断是订单付款还是任务付款，有值为订单支付，undefined为任务支付
        this.paymentDialog.type = temp.orderNo;
        this.paymentDialog.recordPayForId = temp.id;
        this.paymentDialogVisible = true;
      },
      changeCustomerCoupon() {
        this.customerCouponList.forEach(item => {
          if (item.id === this.paymentDialog.preferentialId) {
            this.paymentDialog.preferentiMoney += item.money;
            this.paymentDialog.chooseCouponMoney = item.money;
            this.paymentDialog.payment -= this.paymentDialog.chooseCouponMoney;
            this.paymentDialog.payment = this.paymentDialog.payment < 0 ? 0 : this.paymentDialog.payment;
          }
        });
        if (this.paymentDialog.preferentialId === '') {
          this.paymentDialog.preferentiMoney -= this.paymentDialog.chooseCouponMoney
          this.paymentDialog.payment = this.paymentDialog.originPayment;
        }
      },
      closePaymentDialog() {
        this.paymentDialogVisible = false;
        this.$refs.paymentForm.resetFields();
        this.paymentDialog.payMoney = ""
        this.paymentDialog.preferentialId = ""
      },
      goToPayMoney() {
        this.$refs['paymentForm'].validate(valid => {
          if (valid) {
            if (this.paymentDialog.type) {
              this.paymentDialog.payment -= this.paymentDialog.payMoney;
              orderPayMoney(this.paymentDialog)
              if (this.paymentDialog.preferentialId !== null && this.paymentDialog.preferentialId !== "") {
                useCustomerCoupon(this.paymentDialog.preferentialId, this.orderInfo.id);
                for (let i = 0; i < this.customerCouponList.length; i++) {
                  if (this.customerCouponList[i].id === this.paymentDialog.preferentialId) {
                    this.customerCouponList.splice(i, 1);
                  }
                }
              }
              this.orderInfo.payment = this.orderInfo.payment - this.paymentDialog.payMoney - this.paymentDialog.chooseCouponMoney;
              this.orderInfo.preferentiMoney = this.paymentDialog.preferentiMoney;
              this.orderInfo.paidMoney = this.orderInfo.paidMoney + this.paymentDialog.payMoney;
              this.orderInfo.balanceFlag = this.orderInfo.payment === 0 && this.orderInfo.money === this.orderInfo.paidMoney ? 2 : 1;
              this.orderInfo.paidFlag = this.orderInfo.payment === 0 ? 1 : 2;
            } else {
              taskPayMoney(this.paymentDialog)
              let result = this.orderInfo.orderDetailList.find(task => task.id === this.paymentDialog.recordPayForId);
              result.payment = result.payment - this.paymentDialog.payMoney;
              result.paidMoney = result.paidMoney + this.paymentDialog.payMoney;
            }
            this.$message.success({message: '付款成功！', duration: 1500})
            this.paymentDialogVisible = false;
            this.paymentDialog.payMoney = "";
            this.paymentDialog.preferentialId = "";
            this.$forceUpdate();
          }
        })
      }
    },
    async mounted() {
      this.orderId = this.$route.params.orderId || Cookies.get("orderDetail_OrderId");
      await queryOrderInfoById(this.orderId).then(resp => {
        this.orderInfo = resp;
      });
      await queryStaffInfo().then(resp => this.staffInfoList = resp);
      await queryTotalLevelOrderCategory().then(data => this.orderCategoryList = data);
      await this.initCustomerCoupon();
      this.orderDetailsLength = this.orderInfo.orderDetailList.length;
      this.orderInfo.orderDetailList.forEach(item => {
        item.taskIsCheck = true;
        item.taskIsEdit = false;
        item.isNewAdd = false;
        item.gnflArray = [item.sceneId, item.gnfl];
      })
    }

  }
</script>

<style scoped>
  .main {
    margin: 10px 0 0 8px;
  }

  .detailsAside {
    margin: 0 0 0 10px;
    width: 850px !important;
    padding: 20px 0 0 0;
    background-color: #fff;
  }

  .detailsMain {
    margin: 0 0 0 10px;
    background-color: #fff;

  }

  .el-divider--horizontal {
    margin: 10px 0;
  }

  ::v-deep .el-descriptions__body {
    color: darkgray;
  }

  ::v-deep .el-tabs__item.is-active {
    background-color: #FFFFFF8E;
  }

  ::v-deep .el-tabs__item {
    background-color: #f1f0f0;
    border-radius: 10px 10px 0 0;
  }

  ::v-deep .el-tabs--card > .el-tabs__header .el-tabs__nav {
    border-top: none;
  }

  #addTask {
    position: relative;
    top: 35px;
    left: 755px;
    z-index: 998;
  }

  .infinite-list {
    height: 450px;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .infinite-list-item {
    display: flex;
    align-items: center;
    height: 110px;
    background: #e7e7e7;
    margin: 0 10px 10px 10px;
  }

  .edit {
    display: none;
  }

  .list-item:hover .edit {
    display: block;
  }

  .list-item:hover {
    background: #C4C4C4EC;
  }

  .cut {
    color: darkgray;
    margin: 0 10px;
  }

  .newTaskMargin {
    margin-left: 5px;
  }

  .el-card__body, .el-main {
    padding: 10px;
  }

  .moneyTitle {
    font-size: 12px;
    color: #ababab;
  }

  .moneyValue {
    font-weight: bold;
    font-size: 23px;
  }

  ::v-deep .el-progress-bar__outer {
    width: 265px;
  }

  .el-timeline-item {
    padding-bottom: 60px;
  }

  .noOrderRecord {
    background-color: #eeecec;
    width: 265px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: Center;
  }

  ::v-deep .el-form-item__label {
    font-size: 12px;
    line-height: 30px;
    margin-bottom: 5px;
  }

  ::v-deep .el-dialog__body {
    padding-bottom: 15px !important;
  }

  ::v-deep .paymentForm .el-form-item__error {
    margin-left: 80px;
  }
</style>
